
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Pricing Cards</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <section class="landing-page-section">
        <h2>Become <span class="gradient-text">Atheros Member</span></h2>
        <p>
          The price for each plan represents a one-time payment. <!--? more text here -->
        </p>
        <div class="pricing-container">
          <article class="pricing-card pricing-card--primary">
            <img
              src="assets/complete-package.svg"
              alt="Complete Package"
              class="plan-icon"
            >
            <h3>The Complete Package</h3>
            <div class="pricing-card__price">
              <img
                alt="Price"
                src="assets/price.svg"
              >
              $94.00
              <s>$174</s>
            </div>
            <a
              class="enroll"
              title="Enroll Now"
              target="_blank"
              rel="noopener"
              href="https://learning.atheros.ai/course-detail/ux-design-process"
            >
              Enroll Now
            </a>
            <div class="divider"></div>
            <ul>
              <li>
                The Complete Package includes all the benefits mentioned in the next two packages 👇🏼
              </li>
              <li>
                Online Video Course
              </li>
              <li>
                E-book in PDF format
              </li>
              <li>
                Design resources + special deals on design assets
              </li>
              <li>
                Access to the Slack mentoring channel
              </li>
            </ul>
          </article>       
          <article class="pricing-card">
            <img
              src="assets/video.svg"
              alt="Video Course"
              class="plan-icon"
            >
            <h3>Video Course</h3>
            <div class="pricing-card__price">
              <img
                alt="Price"
                src="assets/price.svg"
              >
              $86.00
              <s>$49</s>
            </div>
            <a
              class="enroll"
              title="Enroll Now"
              target="_blank"
              rel="noopener"
              href="https://learning.atheros.ai/course-detail/ux-design-process"
            >
              Enroll Now
            </a>
            <div class="divider"></div>
            <ul>
              <li>
                More than 4.5 hours of videos (theory explained on practical examples + designing real app design in Figma)
              </li>
              <li>
                10 Modules, 31 Chapters, 30 Quizzes + Certificate
              </li>
              <li>
                Get feedback and mentoring directly from Jan Mraz and other members in a private Slack channel
              </li>
              <li>
                Database with useful design freebies, tools, and other links
              </li>
            </ul>
          </article>
          <article class="pricing-card">
            <img
              src="assets/ebook.svg"
              alt="E-book Package"
              class="plan-icon"
            >
            <h3>E-book</h3>
            <div class="pricing-card__price">
              <img
                alt="Price"
                src="assets/price.svg"
              >
              $27.00
              <s>$29</s>
            </div>
            <a
              class="enroll"
              title="Enroll Now"
              target="_blank"
              rel="noopener"
              href="https://learning.atheros.ai/course-detail/ux-design-process"
            >
              Enroll Now
            </a>
            <div class="divider"></div>
            <ul>
              <li>
                150+ pages of design knowledge in PDF format
              </li>
              <li>
                Design explained on practical examples + components cheatsheet
              </li>
              <li>
                Database with useful design freebies, tools, and other useful links
              </li>
              <li>
                Special deals on design assets and tools that are available only for the Atheros students!
              </li>
            </ul>
          </article>
        </div>
      </section>
    </body>
</html>

          <!-- You get <strong>lifetime access</strong> to mentioned benefits with a <strong>single payment</strong>. -->

<!-- <li>
                Online Video Course
              </li>
              <li>
                E-book in PDF format
              </li>
              <li>
                Design resources + special deals on design assets
              </li>
              <li>
                Access to the Slack mentoring channel
              </li> -->

